<style scoped>
html{
  height: 1000px;
  width: 100%;
}
.login-container{
  width:100%;
  height: 800px;
  background: url(../images/adminbg.png)
}
h2{
  padding: 20px 0;
  color: #fff;
}
.login-box{
  background: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  width: 300px;
  padding: 50px;
  height: 300px;
  position: fixed;
  top:0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  text-align: center;
}
button{
  margin:0 10px
}
</style>
<template>
    <div class="login-container">
        <div class="login-box">
            <h2>顺达汽贸后台管理系统</h2>
            <Form ref="formInline" :model="formInline" :rules="ruleInline" inline>
                <Form-item prop="user">
                    <Input type="text" v-model="formInline.user" placeholder="Username">
                    <Icon type="ios-person-outline" slot="prepend"></Icon>
                    </Input>
                </Form-item>
                <Form-item prop="password">
                    <Input type="password" v-model="formInline.password" placeholder="Password">
                    <Icon type="ios-locked-outline" slot="prepend"></Icon>
                    </Input>
                </Form-item>
                <Form-item>
                    <Button type="primary" @click="handleSubmit('formInline')">登录</Button>
                    <Button  @click="forget('forget')" >忘记密码</Button>
                </Form-item>
            </Form>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
                return {
                    formInline: {
                        user: '',
                        password: ''
                    },
                    ruleInline: {
                        user: [{
                            required: true,
                            message: '请填写用户名',
                            trigger: 'blur'
                        }],
                        password: [{
                            required: true,
                            message: '请填写密码',
                            trigger: 'blur'
                        }, {
                            type: 'string',
                            min: 6,
                            message: '密码长度不能小于6位',
                            trigger: 'blur'
                        }]
                    }
                }
            },
            methods: {
                handleSubmit(name) {
                    var that = this
                    this.$refs[name].validate((valid) => {
                        if (valid) {
                            this.$http.get("http://www.htmlk.cn:80/userAll").then((response) => {
                                console.log(response.data)
                                var res = response.data;
                                var local = that.$data.formInline;
                                for (var i = 0; i < res.length; i++) {
                                  if(res[i].user==local.user&&res[i].pwd==local.password){
                                      sessionStorage.setItem('login',res[i].user)
                                    this.$Message.success('登录成功!');
                                    this.$router.replace({ path: 'list' })
                                  }else{
                                      this.$Message.error('账号或密码错误!');
                                  }
                                }
                            })
                        } else {
                            this.$Message.error('请输入账号密码!');
                        }
                    })
                },
                forget(){
                  this.$Message.error('请联系管理员：18679654648（手机号）!');
                }
            }
    }
</script>
